@model ContentTypesAdminNodeViewModel

<style asp-src="~/OrchardCore.Contents/Styles/Contents.min.css" debug-src="~/OrchardCore.Contents/Styles/Contents.css"></style>
<style asp-src="~/OrchardCore.AdminMenu/Styles/admin-menu-icon-picker.min.css" debug-src="~/OrchardCore.AdminMenu/Styles/admin-menu-icon-picker.css" at="Head" depends-on="admin"></style>

<script asp-name="vuejs" at="Foot"></script>
<script asp-src="~/OrchardCore.AdminMenu/Scripts/admin-menu-icon-picker.min.js" debug-src="~/OrchardCore.AdminMenu/Scripts/admin-menu-icon-picker.js" at="Foot" depends-on="admin"></script>

<h5>@T["Content Types"]</h5>

<div class="row">
    <div class="col col-xl-9">

        @*Panel Switcher*@
        <div class="custom-control custom-checkbox">
            <input asp-for="ShowAll" class="custom-control-input" id="ContentTypesAdminNode_ShowAll" />
            <label asp-for="ShowAll" class="custom-control-label">@T["Show All Content Types"]</label>
        </div>

        @*Show All Panel*@
        <div id="show-all-card" class="card mb-4 @(Model.ShowAll ? "" : "collapse")">
            <div class="card-header">
                @T["Show All Content Types"]
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label asp-for="IconClass">@T["Default Icon"]</label>

                    <div class="input-group mb-3">
                        <div class="btn-toolbar" role="toolbar" aria-label="Icon Selector Toolbar">

                            <div class="btn-group input-group mr-2" role="group" aria-label="Icon Selector">
                                <button type="button" class="btn btn-primary sample-icon">
                                    <i id="@("sample-icon-" + Html.IdFor(m=>m.IconClass))" class="@Model.IconClass"></i>
                                </button>
                                <input type="hidden" name="@Html.NameFor(m=>m.IconClass)" id="@Html.IdFor(m => m.IconClass)" class="icon-val" value="@Model.IconClass" />
                                <button type="button"
                                        class="btn btn-primary icon-picker-trigger"
                                        data-related-node="@Html.IdFor(m => m.IconClass)">
                                    @T["Pick"]
                                </button>
                            </div>

                            <div class="btn-group" role="group" aria-label="Remove Icon Button">
                                <button type="button" class="btn btn-secondary remove-icon" data-related-node="@Html.IdFor(m => m.IconClass)">
                                    <div style="pointer-events:none;">
                                        <i class="fa fa-trash"></i>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>

                    <span class="hint">@T["Select an icon. It will be shared by all menu items."]</span>
                </div>
            </div>
        </div>

        @*Show Selected Panel*@
        <div id="show-selected-card" class="card mb-4 @(Model.ShowAll ? "collapse" : "")">
            <div class="card-header">
                @T["Select Content Types"]
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <ul class="list-group">
                            @for (int i = 0; i < Model.ContentTypes.Count(); i++)
                            {
                                var name = Model.ContentTypes[i].ContentTypeId;
                                var checkd = Model.ContentTypes[i].IsChecked;
                                <li class="list-group-item d-flex align-items-center  @(checkd ? "" : "disabled-content-type")">
                                    <div class="flex-grow-1">
                                        <input type="hidden" name="@Html.NameFor(m => m.ContentTypes[i].ContentTypeId)" value="@Model.ContentTypes[i].ContentTypeId" />
                                        <div class="custom-control custom-checkbox">
                                            <input asp-for="ContentTypes[i].IsChecked" class="custom-control-input content-type-checkbox" />
                                            <label class="custom-control-label" for="@Html.IdFor(m => m.ContentTypes[i].IsChecked)">@name</label>
                                        </div>
                                    </div>

                                    <div class="btn-toolbar icon-toolbar" role="toolbar" aria-label="Icon Selector Toolbar">

                                        <div class="btn-group input-group mr-2" role="group" aria-label="Icon Selector">
                                            <button type="button" class="btn btn-primary sample-icon">
                                                <i id="@("sample-icon-" + Html.IdFor(m => m.ContentTypes[i].IconClass))"
                                                    class="@(Model.ContentTypes[i].IconClass)"></i>
                                            </button>
                                            <input type="hidden" name="@Html.NameFor(m=>m.ContentTypes[i].IconClass)"
                                                    id="@Html.IdFor(m => m.ContentTypes[i].IconClass)" class="icon-val"
                                                    value="@Model.ContentTypes[i].IconClass" />
                                            <button type="button"
                                                    class="btn btn-primary icon-picker-trigger"
                                                    data-related-node="@Html.IdFor(m => m.ContentTypes[i].IconClass)">
                                                @T["Icon"]
                                            </button>
                                        </div>

                                        <div class="btn-group" role="group" aria-label="Remove Icon Button">
                                            <button type="button" class="btn btn-secondary remove-icon"
                                                    data-related-node="@Html.IdFor(m => m.ContentTypes[i].IconClass)">
                                                <div style="pointer-events:none;">
                                                    <i class="fa fa-trash"></i>
                                                </div>
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            }
                        </ul>
                        <span class="hint">@T["The content types to add to the menu."]</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="iconPickerVue">
    <div class="modal" id="iconPickerModal" tabindex="-1" role="dialog" aria-labelledby="iconPickerModal" aria-hidden="true">
        <div class="modal-dialog" role="dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@T["Pick an icon"]</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0">
                    <div id="inline-picker" class="icp icp-auto" data-placement="inline"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script at="Foot" depends-on="jquery">
    $(function () {
        switchContentTypesCheckBoxes();

        $('#ContentTypesAdminNode_ShowAll').change(function () {
            switchContentTypesCheckBoxes();
        });

        function switchContentTypesCheckBoxes() {
            var showAll = $('#ContentTypesAdminNode_ShowAll').prop('checked');

            if (showAll) {
                $('#show-all-card').show();
                $('#show-selected-card').hide();
            } else {
                $('#show-all-card').hide();
                $('#show-selected-card').show();
            }
        }

        $('.content-type-checkbox').on('click', function (e) {
            var listItem = $(e.target).closest('.list-group-item');

            var selected = $(e.target).prop('checked');
            selected ? listItem.removeClass('disabled-content-type') : listItem.addClass('disabled-content-type');

        });

        $('.icon-picker-trigger').on('click', function (e) {

            var node = $(e.target).data('related-node');
            iconPickerVue.show(node, 'sample-icon-' + node);
        });

        $('button.remove-icon').on('click', function (e) {
            var node = $(e.target).data('related-node');
            $('#' + node).val('');
            $('#sample-icon-' + node).replaceWith('<i id="sample-icon-' + node + '" class=" "></i>'); // changing the class is not enough.
        });
    });
</script>
